<template>
  <div class="dashboard-map">
    <div class="map-3d" id="map3d" ref="map3d"></div>
    <!-- <map-dialog :dialogData="dialogData" v-if="showDialog"></map-dialog> -->
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import EchartsConfig from './hotmap'
import mapDialog from './provinceData.vue'
const randomData: any = () => {
  return Math.round(Math.random() * 500)
}
@Component({
  name: 'dashboard-map',
  components: {
    //引用的组件在这里声明
    mapDialog
  }
})
export default class extends Vue {
  @Prop({ default: [] }) private data!: []
  // @Prop({ required: true }) private propExp2?: boolean
  private map3d: any
  private index = 0
  private timer: any
  private oneMap = [
    { name: '北京', value: '100' },
    { name: '天津', value: randomData() },
    { name: '上海', value: randomData() },
    { name: '重庆', value: '0' },
    { name: '河北', value: randomData() },
    { name: '河南', value: randomData() },
    { name: '云南', value: randomData() },
    { name: '辽宁', value: '0' },
    { name: '黑龙江', value: randomData() },
    { name: '湖南', value: randomData() },
    { name: '安徽', value: '0' },
    { name: '山东', value: randomData() },
    { name: '新疆', value: '0' },
    { name: '江苏', value: randomData() },
    { name: '浙江', value: randomData() },
    { name: '江西', value: randomData() },
    { name: '湖北', value: randomData() },
    { name: '广西', value: randomData() },
    { name: '甘肃', value: randomData() },
    { name: '山西', value: '0' },
    { name: '内蒙古', value: randomData() },
    { name: '陕西', value: randomData() },
    { name: '吉林', value: randomData() },
    { name: '福建', value: '0' },
    { name: '贵州', value: randomData() },
    { name: '广东', value: '0' },
    { name: '青海', value: '0' },
    { name: '西藏', value: '0' },
    { name: '四川', value: randomData() },
    { name: '宁夏', value: randomData() },
    { name: '海南', value: '0' },
    { name: '台湾', value: '0' },
    { name: '香港', value: '0' },
    { name: '澳门', value: '0' },
    { name: '南海诸岛', value: '0' }
  ]
  private twoMap = [
    { name: '北京', value: '100' },
    { name: '天津', value: '0' },
    { name: '上海', value: '0' },
    { name: '重庆', value: '0' },
    { name: '河北', value: randomData() },
    { name: '河南', value: randomData() },
    { name: '云南', value: randomData() },
    { name: '辽宁', value: '0' },
    { name: '黑龙江', value: '0' },
    { name: '湖南', value: '0' },
    { name: '安徽', value: '0' },
    { name: '山东', value: '0' },
    { name: '新疆', value: randomData() },
    { name: '江苏', value: randomData() },
    { name: '浙江', value: randomData() },
    { name: '江西', value: '0' },
    { name: '湖北', value: '0' },
    { name: '广西', value: '0' },
    { name: '甘肃', value: '0' },
    { name: '山西', value: '0' },
    { name: '内蒙古', value: randomData() },
    { name: '陕西', value: randomData() },
    { name: '吉林', value: randomData() },
    { name: '福建', value: randomData() },
    { name: '贵州', value: randomData() },
    { name: '广东', value: '0' },
    { name: '青海', value: '0' },
    { name: '西藏', value: '0' },
    { name: '四川', value: '0' },
    { name: '宁夏', value: '0' },
    { name: '海南', value: randomData() },
    { name: '台湾', value: randomData() },
    { name: '香港', value: randomData() },
    { name: '澳门', value: randomData() },
    { name: '南海诸岛', value: randomData() }
  ]
  private dataConfig: any[] = [this.oneMap, this.twoMap]
  private dataTitle: any[] = ['申请用户数', '授信用户数']
  private dialogData: any = {}
  private optinData: any = []
  get showDialog() {
    //computed 属性
    return this.data.length > 0
  }
  @Watch('data')
  private ondataChange(val: any, old: any) {
    // this.dialogData = {}
    // this.dataConfig = []
    // console.log(val)
    // if (val.length <= 0) {
    //   return false
    // }
    // this.data.forEach(item => {
    //   console.log(item)
    //   this.dataConfig.push({
    //     name: (item as any).name,
    //     value: 0,
    //     regionHeight: 300,
    //     itemStyle: {
    //       color: 'rgb(0, 138, 243)'
    //     },
    //     label: {
    //       show: true
    //     }
    //   })
    // })
    // this.map3d.setOption(this.dataConfig[0])
    // this.dialogData = val[0]
    // this.index === 0
    // this.index++
    // clearInterval(this.timer)
    // this.timer = setInterval(() => {
    //   if (this.index >= this.dataConfig.length) {
    //     this.index = 0
    //   }
    //   this.dialogData = val[this.index]
    //   this.map3d.setOption(this.dataConfig[this.index])
    //   this.index++
    // }, 5000)
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    //mounted 钩子
    this.$nextTick(() => {
      if (this.$refs.map3d) {
        this.map3d = new EchartsConfig('map3d')
        console.log(this.dataConfig[0])
        console.log(this.index)
        this.map3d.setOption(this.dataConfig[0], this.dataTitle[0])
      }
    })
    this.timer = setInterval(() => {
      if (this.index >= this.dataConfig.length) {
        this.index = 0
      }
      this.map3d.setOption(
        this.dataConfig[this.index],
        this.dataTitle[this.index]
      )
      this.index++
    }, 30000)
  }
  beforeDestroy() {
    clearInterval(this.timer)
    this.map3d = null
  }
  private methodExp() {
    // method创建地方
  }
}
</script>

<style lang="scss" scoped>
.dashboard-map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 1998;
  .map-3d {
    width: 1980px;
    margin-top: 1.5em;
    height: 930px;
  }
}
</style>
